<template>
  <div
    class="group max-w-sm sm:max-w-md md:max-w-lg rounded-2xl overflow-hidden shadow-lg bg-white dark:bg-gray-800 transition-all duration-500 hover:shadow-2xl cursor-pointer flex flex-col"
  >
    <!-- 图片 -->
    <div class="relative w-full h-40 overflow-hidden">
      <img
        :src="data.cover"
        alt="cover"
        class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
      />
      <div
        class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent"
      ></div>
      <div
        v-if="data.isTop === 1"
        class="absolute top-3 left-3 bg-gradient-to-r from-blue-500 to-indigo-500 text-white text-xs px-3 py-1.5 rounded-full font-medium shadow-lg backdrop-blur-sm"
      >
        ⭐ 置顶
      </div>
    </div>

    <!-- 内容 -->
    <div class="p-4 flex flex-col flex-grow bg-white dark:bg-gray-800">
      <h2
        class="text-lg font-bold text-gray-800 dark:text-white leading-tight line-clamp-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300 mb-1"
      >
        {{ data.title }}
      </h2>

      <div class="flex items-center space-x-4 mb-2 mt-2">
        <div class="flex items-center space-x-1 text-blue-600 dark:text-blue-400">
          <span class="text-[12px]">👁️ {{ data.visitCount }} 次</span>
        </div>
        <div
          class="inline-flex items-center px-2 py-0.5 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 text-xs font-medium rounded-full w-max"
        >
          📚 {{ data.articleCount }} 篇文章
        </div>
      </div>

      <div class="flex items-center space-x-1 mb-2">
        <span class="text-sm">⏰ {{ formatDate(data.updateTime) }}</span>
      </div>
      <p
        class="text-xs text-gray-600 dark:text-gray-300 leading-relaxed line-clamp-3 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors duration-300 mb-4"
      >
        {{ data.summary }}
      </p>
      <button
        @click.stop="goToDetail"
        class="w-full bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600 text-white text-sm font-medium py-2 rounded-xl transition-all duration-300 hover:shadow-lg hover:scale-105 mt-auto"
      >
        查看详情 →
      </button>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
const props = defineProps({
  data: Object
})

const goToDetail = () => {
  router.push(`/wiki/${props.data.id}/${props.data.firstArticleId}`)
}

const formatDate = dateString => {
  if (!dateString) return '未知'
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'short',
    day: 'numeric'
  })
}
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
